/* eslint-disable vue/require-default-prop */
/* eslint-disable vue/valid-v-on */
<template>
  <div style="width:100%">
    <a-form-model
      ref="finalData"
      :label-col="{span: 5}"
      :wrapper-col="{span: 18}"
      :model="finalData"
    >
      <a-form-model-item
        v-for="(item, index) in finalData.domains"
        :key="index"
        :label="item.label_name"
        :prop="'domains.' + index + '.value'"
        :rules="{ required: item.required, message: '内容不可为空', trigger: 'blur' }"
      >
        <a-input
          style="width: 60%;"
          v-if="item.type_id==1"
          :disabled="item.disabled"
          v-model="item.value"
          :placeholder="item.placeHolder"
        />
        <a-select v-if="item.type_id==2" style="width: 60%;" :disabled="item.disabled" v-model="item.value">
          <template v-for="(list, listIndex) in item.selectionList">
            <a-select-option :key="listIndex" :value="list">
              {{ list }}
            </a-select-option>
          </template>
        </a-select>
        <a-upload
          name="file"
          :multiple="true"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          headers="headers"
          v-if="item.type_id==3"
          :disabled="item.disabled"
          style="width: 60%;display:inline-block"
        >
          <a-button> <a-icon type="upload" /> 点击上传 </a-button>
        </a-upload>
        <a-date-picker v-model="item.value" v-if="item.type_id==4" :disabled="item.disabled" type="date" style="width: 60%;"/>
        <a-icon
          v-if="finalData.domains.length > 0"
          class="dynamic-updown-button"
          type="up"
          :disabled="finalData.domains.length === 1 || index==0"
          @click="upDomain(item,index)"
        />
        <a-icon
          v-if="finalData.domains.length > 0"
          class="dynamic-updown-button"
          type="down"
          :disabled="finalData.domains.length === 1 || index==finalData.domains.length-1"
          @click="downDomain(item,index)"
        />
        <a-icon
          v-if="finalData.domains.length > 0"
          class="dynamic-delete-button"
          type="close"
          @click="removeDomain(item)"
        />
        <a-tag v-if="item.is_head" color="blue" style="margin-left:6%"> 表头 </a-tag>
      </a-form-model-item>
      <a-form-model-item v-bind="formItemLayoutWithOutLabel" :wrapper-col="{span: 20,offset:2}">
        <a-button type="dashed" style="width: 100%" @click="() => {this.showData = { selectionList:[],disabled:false,required:false,is_head:false};this.visible=true}">
          <a-icon type="plus" /> 增加表单项
        </a-button>
      </a-form-model-item>
    </a-form-model>
    <a-modal
      :visible="visible"
      title="操作详情"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      okText="保存"
      cancelText="取消"
      v-if="visible"
      :maskClosable="false"
    >
      <a-form-model ref="showData" :model="showData" :label-col="{span: 5}" :wrapper-col="{span: 16}" :rules="rules">
        <a-form-model-item label="字段名称" prop="label_name">
          <a-input v-model="showData.label_name" ></a-input>
        </a-form-model-item>
        <a-form-model-item label="类型" prop="type_id">
          <a-select v-model="showData.type_id">
            <a-select-option value="1" >
              输入框
            </a-select-option>
            <a-select-option value="2">
              选择框
            </a-select-option>
            <a-select-option value="3">
              上传文件
            </a-select-option>
            <a-select-option value="4">
              日期
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item v-show="showData.type_id==1" label="输入框提示:">
          <a-input v-model="showData.placeHolder"></a-input>
        </a-form-model-item>
        <a-form-model-item v-show="showData.type_id==2" label="添加选项:">
          <template v-for="( item, index ) in showData.selectionList">
            <a-tag :key="index" :closable="true" @close="handleClose(item)" color="#2db7f5">{{ item }}</a-tag>
          </template>
          <a-popover v-model="popVisible" title="添加选项" trigger="click">
            <div slot="content">
              <a-input v-model="selectContent" style="margin-bottom:3px"></a-input>
              <a-button type="link" @click="addSelection" >确定</a-button>
            </div>
            <a-button type="dashed">
              Click me
            </a-button>
          </a-popover>
        </a-form-model-item>
        <a-form-model-item label="是否禁用" v-show="showData.type_id!=3">
          <a-switch @change="(checked) => { checked?this.showData.disabled = true:this.showData.disabled=false}"></a-switch>
        </a-form-model-item>
        <a-form-model-item label="是否必填">
          <a-switch @change="onChange"></a-switch>
        </a-form-model-item>
        <a-form-model-item label="是否为表头" v-show="showData.type_id!=3">
          <a-switch @change="(checked) => { checked?this.showData.is_head = true:this.showData.is_head=false}"></a-switch>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
export default {
  props: {
    // eslint-disable-next-line vue/require-default-prop
    getData: Array
  },
  data () {
    return {
      popVisible: false,
      selectContent: '',
      confirmLoading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 20, offset: 4 }
        }
      },
      dynamicValidateForm: {
        domains: []
      },
      visible: false,
      showData: {},
      finalData: {
        domains: []
      },
      rules: {
        label_name: [{ required: true, message: '内容不可为空', trigger: 'blur' }],
        type_id: [{ required: true, message: '内容不可为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    removeDomain (item) {
      const index = this.finalData.domains.indexOf(item)
      if (index !== -1) {
        this.finalData.domains.splice(index, 1)
      }
    },
    addDomain () {
      this.dynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
      })
    },
    handleCancel () {
      this.showData = {}
      this.visible = false
    },
    handleOk () {
      this.$refs.showData.validate(valid => {
        if (!valid) {
          return false
        } else {
          this.confirmLoading = true
          console.log(this.finalData)
          this.finalData.domains.push(JSON.parse(JSON.stringify(this.showData)))
          setTimeout(() => {
            this.confirmLoading = false
            this.visible = false
          }, 1000)
        }
      })
      // console.log(this.finalData)
    },
    onChange (checked) {
      // console.log(checked)
      checked ? this.showData.required = true : this.showData.required = false
    },
    addSelection () {
      this.showData.selectionList.push(this.selectContent)
      this.selectContent = ''
      this.popVisible = false
    },
    handleClose (removedTag) {
      const tags = this.showData.selectionList.filter(tag => tag !== removedTag)
      // console.log(tags)
      this.showData.selectionList = tags
    },
    upDomain (arr, index) {
      if (this.finalData.domains.length === 1 || index === 0) {
        return
      }
      this.finalData.domains[index] = this.finalData.domains.splice(index - 1, 1, this.finalData.domains[index])[0]
    },
    downDomain (arr, index) {
      if (this.finalData.domains.length === 1 || index === this.finalData.domains.length - 1) {
        return
      }
      this.finalData.domains[index] = this.finalData.domains.splice(index + 1, 1, this.finalData.domains[index])[0]
    }
  },
  watch: {
    finalData: {
      deep: true,
      handler: function (newval) {
        this.$emit('data', newval)
      }
    }
  },
  mounted () {
    this.finalData.domains = this.getData
  }
}
</script>
<style>
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 1px;
  left: 15px;
  font-size: 14px;
  color: red;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.dynamic-updown-button{
  cursor: pointer;
  position: relative;
  top: 1px;
  left: 12px;
  font-size: 14px;
  color: #33AAFF;
  transition: all 0.3s;
}
.dynamic-updown-button:hover {
  color: #777;
}
.dynamic-updown-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>
